<template>
  <div id="slideSmallMid" v-show="this.$store.state.isSlide">
    <!-- 左边侧边栏中间路由内容区域 -->
    <ul class="link-list center-block">
      <router-link
        v-for="(item,index) in list"
        :key="item.value"
        :to="{path:item.path,query:{item:index,department:1}}"
        :class="{'router-link-exact-active':ind == index}"
        @click.native="changeBgc(index)"
        tag="li"
      >
        <div>
          <i></i>
          <p>{{item.label}}</p>
        </div>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      list: [
        // { path: '/inpatients', label: '患者' },
        // { path: '/diseasestatistics', label: '统计' },
        { path: "/inpatients", label: "在科" },
        { path: "/inpatientsAll", label: "所有" },
        { path: "/collection", label: "收藏" },
        { path: "/diseasestatistics", label: "统计" },
        { path: "/qualityControl", label: "质控" },
        // { path: "/patientShiftLog", label: "交班日志" },
        // { path: "/registeredUser", label: "来访医生" },
      ],
      ind: "0"
    };
  },
  methods: {
    changeBgc(index) {
      this.ind = index;
    }
  },
  mounted() {
    if (this.$route.query.item) {
      this.ind = this.$route.query.ite;
    } else {
      this.ind = 0;
    }
  }
};
</script>
<style scoped>
#slideSmallMid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.link-list li {
  width: 50px;
  height: 7vh;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #8a8a8a;
  margin-bottom: 10px;
}
.link-list li div {
  text-align: center;
}
.link-list li.router-link-exact-active {
  background-color: #11a7f3;
}
.link-list li.router-link-exact-active {
  color: #fff;
}
/* .link-list li i {
  display: inline-block;
  width: 23px;
  height: 23px;
  background-repeat: repeat;
  background-size: cover;
  background-image: url("../../../../static/images/inDepartment_icon.png");
}
.link-list li.router-link-exact-active i {
  background-image: url("../../../../static/images/active_inDepartment_icon.png");
}
.link-list li:nth-child(2) i {
  margin-top: 3px;
  background-image: url("../../../../static/images/statistics_icon.png");
}
.link-list li.router-link-exact-active:nth-child(2) i {
  background-image: url("../../../../static/images/active_statistics_icon.png");
} */
.link-list li i {
  display: inline-block;
  width: 23px;
  height: 23px;
  background-repeat: repeat;
  background-size: cover;
  background-image: url("../../../../static/images/zaike.png");
}
.link-list li.router-link-exact-active i {
  background-image: url("../../../../static/images/isZaike.png");
}
.link-list li:nth-child(2) i {
  margin-top: 3px;
  background-image: url("../../../../static/images/suoyou.png");
}
.link-list li.router-link-exact-active:nth-child(2) i {
  background-image: url("../../../../static/images/isSouyou.png");
}
.link-list li:nth-child(3) i {
  margin-top: 3px;
  background-image: url("../../../../static/images/shoucang.png");
}
.link-list li.router-link-exact-active:nth-child(3) i {
  background-image: url("../../../../static/images/isShoucang.png");
}
.link-list li:nth-child(4) i {
  margin-top: 3px;
  background-image: url("../../../../static/images/tongji.png");
}
.link-list li.router-link-exact-active:nth-child(4) i {
  background-image: url("../../../../static/images/isTongji.png");
}
.link-list li:nth-child(5) i {
  margin-top: 3px;
  background-image: url("../../../../static/images/zhikong.png");
}
.link-list li.router-link-exact-active:nth-child(5) i {
  background-image: url("../../../../static/images/isZhikong.png");
}
</style>

